<!--  -->
<template>
  <div class='evluationPage'>
    <div class="evluationPage-left" style="width:13%">
      <div v-for='it in pageLeft' :key='it.title' :class="it.class" :style="{height:it.height || '12.5%'}">
        <div class="leftItem">
          <div class="title">
            <img class="titleImg" :src="titleSrc" /><span class="titleText">{{ it.title}}</span>
          </div>
          <div class="content">
            <div class="contentItem" v-for='i in it.list' :key='i'>{{i}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="evluationPage-right" style="width:87%">
      <div style="margin-left: 2%;margin-bottom:-3px;color:#fff;font-size:14px;">
        <span class="tittleButton">APT情报发现</span>
        <span style="margin-left:8px">APT画像</span>
      </div>
      <div class="middle-top">
        <div class="middle-top-top">
          <div class="middle-top-left" v-for='it in pageMiddle1.slice(0,1)' :key='it.title' style="height:48%">
            <div class="title">
              <img class="titleImg" :src="titleSrc" /><span class="titleText">{{ it.title}}</span>
            </div>
            <div class="content">
              <div class="contentItem" v-for='i in it.list' :key='i' style="display:flex">
                <div class="left" style="width:100px;text-align:right">{{i.label}}：</div>
                <div class="right" style="flex:1">{{i.value}}</div>
              </div>
            </div>
          </div>
          <div class="middle-top-right" style="height:48%">
            <div class="title">
              <img class="titleImg" :src="titleSrc" /><span class="titleText">组织</span>
            </div>
            <div class="">
              <div class="contentItem content" v-for='it in pageMiddle2' :key='it.title' style="margin-bottom:9px">
                <div class="left">
                  <div>
                    <img :src="it.img" alt="">
                  </div>
                  <div>{{it.title}}</div>
                </div>
                <div class="right">
                  <div v-for='i in it.list' :key='i.title' class="right-item">
                    <div>{{i.title}}</div>
                    <div style="display:flex;justify-content: space-between">
                      <div>{{i.label}}</div>
                      <div class="itemTag">
                        {{ i.tag }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="middle-middle">
          <div class="left">
            <div style="display:flex;padding-left:42%">
              <div>
                <img src="/static/B1/homePage/evaluation/img2.png" alt="">
              </div>
              <div style="margin-left:20px;margin-top:20px">
                <div style='font-size:18px'>共发现线索</div>
                <div><span style="font-size:40px">345</span>条</div>
              </div>

            </div>
          </div>
          <div class="right" style="display:flex">
            <div class="right-circle" style="width:50%">
              <div style='font-size:18px'>发现线索占比</div>
              <div >
                <Pie style="width:478px" :echarts-data="pieDataObj.data" :allObj="pieDataObj" :title="pieDataObj.name" ids="pie1" :isRing="true" :piePosition="['15%', '50%']"></Pie>
              </div>
            </div>
            <div class="right-bar-el" style="width:50%">
              <div style='font-size:18px'>组织信息占比</div>
              <div>
                <div style="display:flex;margin-bottom:3px" v-for='(it,index) in originationList' :key='index'>
                  <div style="flex:1">{{it.label}}</div>
                  <div style="flex:2">{{it.message}}</div>
                  <div style="flex:4">
                    <el-progress :percentage="it.amount" style="display:inline" :color='color[index]' :format="()=>{}"></el-progress>
                  </div>
                  <div :style='{color:color[index]}'>{{it.amount}} %</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle-bottom middle-top-top" style="height:38%">
        <div class="middle-top-left" v-for='it in pageMiddle1.slice(1,2)' :key='it.title'>
          <div class="title">
            <img class="titleImg" :src="titleSrc" /><span class="titleText">{{ it.title}}</span>
          </div>
          <div class="content">
            <div class="contentItem" v-for='i in it.list' :key='i' style="display:flex">
              <span class="left" style="width:100px;text-align:right">{{i.label}}：</span>
              <span class="right">{{i.value}}</span>
            </div>
          </div>
        </div>
        <div class="middle-top-right">
          <div class="title">
            <img class="titleImg" :src="titleSrc" /><span class="titleText">组织</span>
          </div>
          <div class="content-wrapper">
            <div class="contentItem content" v-for='it in pageMiddle3' :key='it.title' style="margin-bottom:9px">
              <div class="left">
                <div>
                  <img :src="it.img" alt="">
                </div>
                <div>{{it.title}}</div>
              </div>
              <div class="right">
                <div v-for='i in it.list' :key='i.title' class="right-item">
                  <div>{{i.title}}</div>
                  <div style="display:flex;justify-content: space-between">
                    <div>{{i.label}}</div>
                    <div class="itemTag">
                      {{ i.tag }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pie from "./charts/pie";
export default {
  components: {
    Pie
  },
  data() {
    return {
      titleSrc: "/static/B1/homePage/evaluation/arrow-left.png",
      color: ["#3557ef", "#8249ea", "#bc7345", "#b84676", "#53b8f2"],
      pageLeft: [
        {
          title: "互联网数据",
          list: [
            "开源数据",
            "社交网络信息",
            "流量数据",
            "日志数据",
            "文件数据"
          ],
          class: "left-top",
          height: "26%"
        },
        {
          title: "涉密网数据",
          list: ["日志数据", "业务数据"],
          class: "left-middle",
          height: "15%"
        },
        {
          title: "移动网数据",
          list: ["日志数据"],
          class: "left-middle"
        },
        {
          title: "车联网数据",
          list: ["日志数据"],
          class: "left-middle"
        },
        {
          title: "电磁空间数据",
          list: ["日志数据"],
          class: "left-middle"
        },
        {
          title: "卫星网数据",
          list: ["日志数据"],
          class: "left-bottom"
        }
      ],
      pageMiddle1: [
        {
          title: "API情报分析引擎一",
          list: [
            {
              label: "ip地址",
              value: "223.104.18.146"
            },
            {
              label: "域名",
              value: "www.baidu.com"
            },
            {
              label: "样本名称",
              value:
                "md5(1234567.'2019@STARK-%$#&-idje-789'),2019@STARK-%$#&-idje-78"
            },
            {
              label: "邮箱",
              value: "xsdjkadlkasda@163.com"
            },
            {
              label: "漏洞",
              value: "ImageMagick 堆缓冲区溢出读漏"
            },
            {
              label: "URL",
              value: "http://127.0.0.1:32767/start.html#id"
            },
            {
              label: "IP地址",
              value: "223.104.18.146"
            },
            {
              label: "域名",
              value: "www.baidu.com"
            }
          ]
        },
        {
          title: "API情报分析引擎二",
          list: [
            {
              label: "ip地址",
              value: "223.104.18.146"
            },
            {
              label: "域名",
              value: "www.baidu.com"
            },
            {
              label: "样本名称",
              value:
                "md5(1234567.'2019@STARK-%$#&-idje-789'),2019@STARK-%$#&-idje-78"
            },
            {
              label: "邮箱",
              value: "xsdjkadlkasda@163.com"
            },
            {
              label: "漏洞",
              value: "ImageMagick 堆缓冲区溢出读漏"
            },
            {
              label: "URL",
              value: "http://127.0.0.1:32767/start.html#id"
            },
            {
              label: "IP地址",
              value: "223.104.18.146"
            },
            {
              label: "域名",
              value: "www.baidu.com"
            }
          ]
        }
      ],
      pageMiddle2: [
        {
          title: "SandCat",
          img: "/static/B1/homePage/evaluation/img.png",
          list: [
            {
              title: "信息1",
              label: "IP地址：223.104.18.146",
              tag: "使用"
            },
            {
              title: "信息2",
              label: "漏洞名称：ImageMagick 堆缓冲区溢出读漏",
              tag: "利用"
            }
          ]
        },
        {
          title: "毒云藤",
          img: "/static/B1/homePage/evaluation/img1.png",
          list: [
            {
              title: "信息1",
              label: "域名：www.baidu.com",
              tag: "创建"
            },
            {
              title: "信息2",
              label: "URL：http://127.0.0.1:32767/start.html#id",
              tag: "拥有"
            }
          ]
        }
      ],
      pageMiddle3: [
        {
          title: "兰宝菇",
          img: "/static/B1/homePage/evaluation/img3.png",
          list: [
            {
              title: "信息1",
              label: "IP地址：223.104.18.146",
              tag: "使用"
            },
            {
              title: "信息2",
              label: "漏洞名称：ImageMagick 堆缓冲区溢出读漏",
              tag: "利用"
            }
          ]
        },
        {
          title: "毒云藤",
          img: "/static/B1/homePage/evaluation/img4.png",
          list: [
            {
              title: "信息1",
              label: "域名：www.baidu.com",
              tag: "创建"
            }/* ,
            {
              title: "信息2",
              label: "URL：http://127.0.0.1:32767/start.html#id",
              tag: "拥有"
            } */
          ]
        }
      ],
      pieDataObj: {
        titleShow: false,
        name: "应用系统统计",
        legendPosition: {
          left: "38%",
          top: "8%"
        },
        text: 0,
        data: [
          {
            name: "IP",
            value: 12
          },
          {
            name: "邮箱",
            value: 34
          },
          {
            name: "URL",
            value: 77
          },
          {
            name: "漏洞",
            value: 9
          }
        ]
      },
      originationList: [
        {
          label: "兰宝菇",
          message: "15条信息",
          amount: 38
        },
        {
          label: "APT38",
          message: "10条信息",
          amount: 28
        },
        {
          label: "旺刺",
          message: "6条信息",
          amount: 20
        },
        {
          label: "海莲花",
          message: "15条信息",
          amount: 60
        }
      ]
    };
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {},
  created() {}
};
</script>
<style  src="../../../../style/style.less" scoped></style>

<style lang='less'>
.content-wrapper{
  height:calc(100% - 32px);
  overflow:scroll;
}
.middle-top-right{
   height:100%;
}
.contentItem.content:last-child{
  margin-bottom:0!important;
}
.contentItem .right-item{
   margin-bottom:10px!important;
}
</style>